<template>
  <div>
    <div class="top-title">
      <div><span @click="lastMonth" class="link">⋘</span></div>
      <div>
        <span>{{ year }}年{{ month }}月</span>
      </div>
      <div><span @click="nextMonth" class="link">⋙</span></div>
    </div>
    <div class="containerBox">
      <div v-for="(item, index) in weeks" :key="index">{{ item }}</div>
    </div>
    <div class="containerBox" style="padding: 1vh 1vh 3vh 1vh">
      <div v-for="(item, index) in data" :key="index">
        <!-- 当前日期 -->
        <div
          v-if="compareToNow(item) === 0"
          style="color: #fff"
          class="nowDay"
          @click="clock_in(item)"
        >
          {{ item.date }}
        </div>
        <!-- 当前以后的日期 -->
        <div v-if="compareToNow(item) === 1">{{ item.date }}</div>
        <!-- 当前以前的日期 -->
        <div v-if="compareToNow(item) === -1" class="otherDay">
          <div>{{ item.date }}</div>
        </div>
        <!-- 历史且未打卡 -->
        <div v-if="compareToNow(item) === 2" class="lostDay">
          <div>{{ item.date }}</div>
          <div class="date-desc">缺</div>
        </div>
        <!-- 历史且未打卡 -->
        <div v-if="compareToNow(item) === 3" class="clockedDay">
          <div>{{ item.date }}</div>
          <div class="date-clocked">✔</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  props: {
    title: String
  },
  data () {
    return {
      now: new Date(),
      weeks: ['日', '一', '二', '三', '四', '五', '六'],
      year: '',
      month: '',
      date: '',
      firstDay: '',
      data: [],
      start_date: new Date(),
      start_date_string: '',
      clockin_title: this.title,
      history: []
    }
  },
  mounted () {
    // this.getNow();
  },
  methods: {
    getNow () {
      this.year = this.now.getFullYear()
      this.month = this.now.getMonth() + 1
      this.date = this.now.getDate()
      this.now.setDate(1)
      this.firstDay = this.now.getDay()
      this.initData()
    },
    getMonthDay (month) {
      if ([1, 3, 5, 7, 8, 10, 12].includes(month)) {
        return 31
      } else if ([4, 6, 9, 11].includes(month)) {
        return 30
      } else if (month === 2) {
        // 判断当年是否为闰年
        if (
          (this.year % 4 === 0 && this.year % 100 !== 0) ||
          this.year % 400 === 0
        ) {
          return 29
        } else {
          return 28
        }
      }
    },
    initData () {
      this.data = []
      let days = this.getMonthDay(this.month)
      for (let i = 0; i < this.firstDay; i++) {
        this.data.push({
          year: '',
          month: '',
          date: ''
        })
      }
      for (let i = 0; i < days; i++) {
        this.data.push({
          year: this.year,
          month: this.month,
          date: i + 1
        })
      }
    },
    lastMonth () {
      this.now.setMonth(this.now.getMonth() - 1)
      this.getNow()
    },
    nextMonth () {
      this.now.setMonth(this.now.getMonth() + 1)
      this.getNow()
    },
    compareToNow (item) {
      // 0代表今天 1代表未来 -1代表历史 2代表历史且未打卡 3代表历史但打卡
      if (item.year && item.month && item.date) {
        let date1 = new Date()
        date1.setFullYear(item.year)
        date1.setMonth(item.month - 1)
        date1.setDate(item.date)
        date1.setHours(0)
        date1.setMinutes(0)
        date1.setSeconds(0)
        let now = new Date() // 当前日期
        now.setHours(0)
        now.setMinutes(0)
        now.setSeconds(0)
        if (date1.getTime() > now.getTime()) {
          // 未来=1
          return 1
        } else if (
          date1.getTime() === now.getTime()
        ) {
          // 今天=0
          return 0
        } else if (
          date1.getTime() < now.getTime() &&
          date1.getTime() < this.start_date.getTime()
        ) {
          // 历史=-1
          return -1
        } else if (
          // 历史且未打卡=2
          date1.getTime() < now.getTime() &&
           Math.floor((date1 - this.start_date) / (1 * 24 * 60 * 60 * 1000)) <= 31 && // 需要显示的日期位于打卡期内
          this.history[Math.floor((date1 - this.start_date) / (1 * 24 * 60 * 60 * 1000))] === 0
        ) {
          return 2
        } else if (
          // 历史且打卡=3
          date1.getTime() <= now.getTime() &&
          (date1 - this.start_date) / (1 * 24 * 60 * 60 * 1000) <= 31 &&
          this.history[Math.floor((date1 - this.start_date) / (1 * 24 * 60 * 60 * 1000))] === 1
        ) {
          return 3
        }
      }
    },
    clock_in (item) { // 打卡并向后端传数据
      console.log(item)
      const formData = new FormData()
      formData.append('account', this.$store.state.userinfo.account)
      formData.append('title', this.clockin_title)
      console.log(this.clockin_title)
      axios
        .put('/api/modifyRoutine', formData)
        .then((response) => {
          console.log(response)
          const noti = this.$vs.notification({
            progress: 'auto',
            color: 'rgb(83,101,81)',
            position: null,
            title: '注意',
            text: ` 您今日已打卡！😀`
          })
        })
        .catch((error) => {
          // 失败，处理错误
          console.error(error)
        })
    }
  },
  created () {
    // 获取打卡的历史记录
    axios
      .get('/api/infoRoutine', {
        params: {
          account: this.$store.state.userinfo.account,
          title: this.clockin_title
        }
      })
      .then((response) => {
        console.log(response)
        for (var i = 0; i < 31; i++) {
          this.history.push(response.data.data.reconding[i])
        } // 获取历史记录
        console.log(this.history)
      })
      .catch((error) => {
        // 失败，处理错误
        console.error(error)
      })

    // 获取打卡开始时间
    axios
      .get('/api/getrstime', {
        params: {
          account: this.$store.state.userinfo.account,
          title: this.clockin_title
        }
      })
      .then((response) => {
        console.log(response)
        this.start_date_string = response.data.data.stime // 获取打卡的开始时间
        console.log(this.start_date_string)
        this.start_date = new Date(this.start_date_string)
        this.start_date.setHours(0)
        this.start_date.setMinutes(0)
        this.start_date.setSeconds(0)
        console.log(this.start_date)
        this.getNow()
        console.log(this.now)
      })
      .catch((error) => {
        // 失败，处理错误
        console.error(error)
      })
  }
}
</script>
<style scoped>
.top-title {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 1rem;
  background-color: #ffffff;
  /* border-bottom: 1px solid #cccccc; */
  line-height: 50px;
}

.containerBox {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 40px;
  grid-gap: 1rem;
  background-color: #ffffff;
  line-height: 40px;
  font-size: 16px;
}

.containerBox div {
  text-align: center;
}

.nowDay {
  background: rgb(83, 101, 81);
  border-radius: 50%;
}

.today {
  background-size: 95% 95%;
  position: relative;
}

.otherDay {
  background-size: 95% 95%;
  position: relative;
  color: #ccc;
}

.lostDay {
  background-size: 95% 95%;
  position: relative;
  color: #a13333;
}

.clockedDay {
  background-size: 95% 95%;
  position: relative;
  color: #20b622;
}

.link {
  font-size: 20px;
  color: rgb(129, 195, 122);
}

.date-desc {
  display: block;
  position: absolute;
  top: 1.75vw;
  left: 0.5vw;
  font-size: 0.05vw;
  color: rgb(177, 0, 0);
}
.date-clocked{
  display: block;
  position: absolute;
  top: 1.75vw;
  left: 0.5vw;
  font-size: 0.05vw;
  color: rgb(26, 146, 36);
}
</style>
